<div  ng-class="{'date-picker-backdrop' : vm.backdrop }">
    <ion-modal-view  class="date-picker-bg">
        <div class="date-bgclose" ng-click="vm.clickToClose()" ></div>
        <div class="date-picker ">
            <header class=" bar date-picker-header" >
                <i class="ion-ios-close-empty left-icon" ng-click="vm.clickToClose()"></i>
                <h1 class="title">选择日期</h1>
                <!--<div class="buttons">
                  <button class="button" ng-click="vm.returnOk()">{{vm.okText}}</button>
                </div>-->
                <i class="ion-ios-checkmark-empty right-icon"  ng-click="vm.returnOk()"></i>
            </header>
            <div class="date-picker-inner has-header">
                <div class="row" ng-if="!vm.datetype">
                    <div class="col date-center" ng-class="{'true':'col-33','false':'col-20'}[!vm.timearea]">
                        <ion-scroll delegate-handle={{vm.yearHandle}}  on-scroll="vm.getData('year')" scrollbar-y=false >
                            <ul >
                                <li ng-repeat="year in vm.yearArr track by $index" >{{year}}</li>
                            </ul>
                        </ion-scroll>
                        <div class = "date-unit">年</div>
                        <div class="hl">
                            <div></div>
                        </div>
                    </div>
                    <div class="col date-center" ng-class="{'true':'col-33','false':'col-20'}[!vm.timearea]">
                        <ion-scroll delegate-handle={{vm.monthHandle}}  on-scroll="vm.getData('month')" scrollbar-y=false>
                            <ul >
                                <li  ng-repeat="month in vm.monthArr track by $index">{{month}}</li>
                            </ul>
                        </ion-scroll>
                        <div class = "date-unit">月</div>
                        <div class="hl">
                            <div></div>
                        </div>
                    </div>
                    <div class="col date-center" ng-class="{'true':'col-33','false':'col-20'}[!vm.timearea]">
                        <ion-scroll delegate-handle={{vm.dateHandle}} on-scroll="vm.getData('date')" scrollbar-y=false>
                            <ul >
                                <li  ng-repeat="date in vm.dateArr track by $index" >{{date}}</li>
                            </ul>
                        </ion-scroll>
                        <div class = "date-unit">日</div>
                        <div class="hl">
                            <div></div>
                        </div>
                    </div>
                    <div ng-if="vm.timearea" class="col date-center col-20" >
                        <ion-scroll delegate-handle={{vm.hourHandle}} on-scroll="vm.getData('hour')" scrollbar-y=false>
                            <ul >
                                <li  ng-repeat="hour in vm.hourArr track by $index" >{{hour}}</li>
                            </ul>
                        </ion-scroll>
                        <div class = "date-unit">时</div>
                        <div class="hl">
                            <div></div>
                        </div>
                    </div>
                    <div ng-if="vm.timearea" class="col date-center col-20" >
                        <ion-scroll delegate-handle={{vm.minHandle}} on-scroll="vm.getData('min')" scrollbar-y=false>
                            <ul >
                                <li  ng-repeat="min in vm.minArr track by $index" >{{min}}</li>
                            </ul>
                        </ion-scroll>
                        <div class = "date-unit">分</div>
                        <div class = "hl">
                            <div></div>
                        </div>
                    </div>
                </div>
                <div class="row" ng-if="vm.datetype">
                    <div class="col date-center col-50">
                        <ion-scroll delegate-handle={{vm.monthHandle}}  on-scroll="vm.getData('month')" scrollbar-y=false>
                            <ul >
                                <li  ng-repeat="month in vm.monthArr track by $index">{{month}}</li>
                            </ul>
                        </ion-scroll>
                        <div class = "date-unit">月</div>
                        <div class="hl">
                            <div></div>
                        </div>
                    </div>
                    <div class="col date-center col-50">
                        <ion-scroll delegate-handle={{vm.dateHandle}} on-scroll="vm.getData('date')" scrollbar-y=false>
                            <ul >
                                <li  ng-repeat="date in vm.dateArr track by $index" >{{date}}</li>
                            </ul>
                        </ion-scroll>
                        <div class = "date-unit">日</div>
                        <div class="hl">
                            <div></div>
                        </div>
                    </div>
                </div>
                <!--<div class="picker-center-highlight"></div>-->
            </div>
        </div>
    </ion-modal-view>
</div>